<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			.container{
				width: 100%;
				min-width: 680px;
				/* height: 600px; */
				margin-top: 100px;
				display: flex;
				flex-wrap: wrap;
			}
			/* odd表示为基数项 */
			.container .item:nth-child(odd){
				/* background-color: aqua; */
			}
			.container .item{
				width: 25%;
				display: flex;
				justify-content: center;
				margin-top: 20px;
			}
			.container .item .item-con{
				/* border: 1px solid red; */
				width: 150px;
				display: flex;
				flex-direction: column;
			}
			.item a.item-con-img{
				height: 150px;
				position: relative;
			}
			.item a.item-con-img img{
				border-radius: 10px;
			}
			.item a.item-con-img span{
				font-size: 14px;
				color: #fff;
				position: absolute;
				left: 10px;
				bottom: 10px;
				letter-spacing: 1px;
				z-index: 2;
			}
			.item a.item-con-img::after{
				content: "";
				width: 100%;
				height: 50%;
				background-image: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.5));
				display: block;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 0px 0px 10px 10px;
			}
			
			.item-con a.item-con-title{
				font-size: 14px;
				color: #333;
				margin-top: 10px;
			}
			.item-con a.item-con-title:hover{
				color: tomato;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
			<div class="item">
				<div class="item-con">
					<a href="" class="item-con-img">
						<img src="img/instagram-01.jpg" width="150" >
						<!--  -->
						<span>2444.0万</span>
					</a>
					<a href="" class="item-con-title">猫，是全世界家庭中较为广泛的宠物。</a>
				</div>
			</div>
		</div>
	</body>
</html>
